<template>
  <div id="material-main-container" class="main-container">
    <div class="Block mc-left">
      <div class="mc-left-top">
        <div class="content-top">
          <div class="wc-left">
            <div class="icon"></div>
          </div>
          <div class="wc-right">
            <div class="wc-right-top">当前库存</div>
            <div class="wc-right-bottom">{{ materialStock.total }}</div>
          </div>
        </div>
        <div class="content-bottom">
          <div class="wc-left">
            <div class="content">
              <span class="line left-line"></span>
              <span class="line right-line"></span>

              <div class="wc-left-top">本月出库</div>
              <div class="wc-left-bottom">{{ materialStock.curmonthOut }}</div>
            </div>
          </div>
          <div class="wc-right">
            <div class="content">
              <span class="line left-line"></span>
              <span class="line right-line"></span>

              <div class="wc-right-top">本月入库</div>
              <div class="wc-right-bottom">{{ materialStock.curmonthIn }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="movedemo">
        <button class="movedemobtn" @click="pickObjectHandle">
          选取移动的物体
        </button>
        <button class="movedemobtn" @click="pickPlacePosition">
          选取物体放置位置
        </button>
        <button class="movedemobtn" @click="moveObject">移动物体</button>
      </div>
    </div>
    <div class="Block mc-center">
      <Tree
        @select="selectNode"
        ref="tree"
        :treeData="treeData"
        :selectedKeys="selectedKeys"
        :expandedKeys="expandedKeys"
        :ue4Viewer="ue4Viewer"
        :focusParam="focusParam"
      ></Tree>
    </div>
    <div class="Block mc-right"></div>
  </div>
</template>

<script>
import waterdatas from "@/datas/water.json";
import * as echarts from "echarts";
import ChartBlock from "@components/ChartBlock";
import ModelTree from "@components/ModelTree/Index.vue";
import modeldatas from "@/datas/model_material.json";
import { message } from "ant-design-vue";
export default {
  name: "MaterialManage",
  components: {
    ChartBlock: ChartBlock,
    Tree: ModelTree,
  },
  data() {
    return {
      receiveOption: null,
      bpOption: null,
      materialStock: {
        total: "1761件",
        curmonthOut: "171件",
        curmonthIn: "76件",
      },
      waterOption: null,
      //是否开始拾取物体
      pickObjectStart: false,
      //拾取到物体的id
      pickedObject: null,
      //是否开始选取放置位置
      placeStart: false,
      //放置的位置
      placeObject: null,
      treeData: [],
      replaceFields: { children: "child", title: "name", key: "id" },
      selectNodes: [],
      // 选中节点
      selectedKeys: [],
      //当前选中节点的节点名称
      selectedTitle: "",
      //当前选中节点的节点属性
      attrDatas: [],
      // 展开节点
      expandedKeys: [],
      // 选中节点及子阶段ue4Id
      selectUe4ids: [],
      //ue4 focus参数
      focusParam: {
        distance: 1000,
      },
    };
  },
  methods: {
    /****************************树操作 start */
    // 根据ue4Id选中树节点
    selectedNodeByue4Id(ue4Id, e) {
      // 查询id
      let node = this.getIdByUe4Id(this.treeData, ue4Id);
      console.log("selectedNodeByue4Id", this.treeData, ue4Id, e);
      if (node && node.id) {
        // 选中
        this.selectedKeys = [];
        this.selectedKeys.push(node.id);
        // 展开指定节点
        this.expandedKeys = [];
        let ids = node.path.split("@");
        for (let i in ids) {
          if (ids[i] && ids[i] != "") this.expandedKeys.push(ids[i]);
        }

        node.title = node.name;
        this.selectNode([node.id], node);
      }

      this.ue4Pick(ue4Id, e);
      return node;
    },

    // 根据ue4Id查询节点
    // treeData  数据源
    getIdByUe4Id(treeData, ue4Id) {
      let currentNode = {};
      for (let i in treeData) {
        let node = treeData[i];
        if (node.ue4Id == ue4Id) currentNode = node;
        // 找到节点，直接返回
        if (currentNode && currentNode.id) return currentNode;
        // 存在节点
        if (node.child && node.child.length > 0) {
          //递归
          let childNode = this.getIdByUe4Id(node.child, ue4Id);
          if (childNode && childNode.id) {
            currentNode = childNode;
            return currentNode;
          }
        }
      }
    },
    // 根据节点id返回节点对象
    getNodeById(treeData, id) {
      let currentNode = {};
      for (let i in treeData) {
        let node = treeData[i];
        if (node.id == id) {
          currentNode = node;
        }
        // 找到节点，直接返回
        if (currentNode && currentNode.id) return currentNode;
        // 存在节点
        if (node.child && node.child.length > 0) {
          let childNode = this.getNodeById(node.child, id);
          if (childNode && childNode.id) {
            currentNode = childNode;
            return currentNode;
          }
        }
      }
    },
    // 树结构节点点击触发
    selectNodeHeightLight(selectUe4ids) {
      // 去除高亮
      this.ue4Viewer.unhighlightAll();
      this.selectNodes = selectUe4ids || [];
      this.ue4Viewer.highlight(this.selectNodes);
    },

    expandNode(keys) {
      this.expandedKeys = [];
      this.expandedKeys = keys;
    },
    //初始化树节点的数据
    loadTreeData() {
      this.loading = true;
      let res = modeldatas;
      if (res.success) {
        this.treeData = res.result;
      } else {
        this.$message.warning(res.message);
      }
    },
    //树节点点击时调用
    selectNode(val, option) {
      if (!val || val.length == 0) {
        return;
      }
    },
    /****************************树操作 end */
    initPage() {
      setTimeout(() => {
        //加载树数据
        this.loadTreeData();
      }, 0);
      let ue4Viewer = this.ue4Viewer;
      if (ue4Viewer && Object.keys(ue4Viewer).length != 0) {
        ue4Viewer.setSelectedNodeByue4Id(this.selectedNodeByue4Id);
      }
    },
    ue4Pick(ue4id, e) {
      if (!ue4id) {
        return;
      }
      let ue4Viewer = this.ue4Viewer;
      //
      if (this.pickObjectStart) {
        //设置物体高亮
        ue4Viewer.highlight([ue4id]);
        this.pickedObject = e;
        this.pickObjectStart = false;
        console.log("pickedObject", this.pickedObject);
      }
      if (this.placeStart) {
        this.placeObject = e.location;

        if (this.placeObject) {
          this.placeStart = false;
          message.info("位置选取成功");
        }
        console.log("placeObject", this.placeObject);
      }
    },
    pickObjectHandle() {
      console.log("pickObject");
      let ue4Viewer = this.ue4Viewer;
      //开始拾取物体
      this.pickedObject = null;
      this.pickObjectStart = true;
    },
    pickPlacePosition() {
      this.placeStart = true;
    },
    moveObject() {
      let ue4Viewer = this.ue4Viewer;

      console.log(
        "pickedObject2",
        this.pickedObject,
        "placeObject2",
        this.placeObject
      );

      if (this.pickedObject && this.pickedObject.object.id) {
        ue4Viewer.objectMoveTo(this.pickedObject.object.id, this.placeObject);
      } else {
        message.warning("选取的对象异常");
      }
      // ue4Viewer.highlight([this.pickedObject.object.id], false);
      // this.placeObject = null;
      // this.pickedObject = null;
    },
  },
  props: {
    ue4Viewer: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
};
</script>
<style lang="less" scoped>
#material-main-container {
  .mc-left {
    visibility: visible;
    width: 476px;

    .mc-left-top {
      margin-top: 15px;
      margin-left: 20px;
      height: 224px;
      width: calc(100% - 20px);

      .content-top {
        height: 112px;
        display: flex;
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100%;

        .wc-left {
          width: 196px;
          height: 100%;

          .icon {
            width: 102px;
            height: 78px;
            margin-left: 60px;
            margin-top: 35px;
            background-image: url(../../assets/svg/Warehouse.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }

        .wc-right {
          width: calc(100% - 196px);
          text-align: left;

          .wc-right-top {
            height: 36px;
            // line-height: 35px;
            font-size: 22px;
            // margin-top: 18px;
            margin-top: 26px;
            color: #fff;
          }

          .wc-right-bottom {
            font-size: 36px;
            color: #1ff8e6;
          }
        }
      }

      .content-bottom {
        height: calc(100% - 112px);
        font-size: 18px;
        display: flex;
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100%;

        .wc-left,
        .wc-right {
          width: 50%;

          .content {
            width: 198px;
            height: 75px;
            margin-left: 20px;
            margin-top: 22px;
            border: 1px solid rgba(3, 71, 96, 1);
            background-color: rgba(0, 0, 0, 0.3);
            position: relative;
            border-radius: 2px;

            .line {
              position: absolute;
              display: inline-block;
              width: 10px;
              height: 100%;
              border: 1px solid #1ff8e6;
              border-radius: 2px;
            }

            .left-line {
              border-right: none;
              left: 0px;
            }

            .right-line {
              border-left: none;
              right: 0px;
            }
          }

          // .content:before {
          //   content: "";
          //   position: absolute;
          //   left: 0;
          //   top: -2px;
          //   width: 10px;
          //   height: 2px;
          //   background-color: #1ff8e6;
          // }

          .wc-left-top,
          .wc-right-top {
            margin-top: 5px;
            height: 30px;
            line-height: 30px;
          }

          .wc-left-bottom,
          .wc-right-bottom {
            color: #1ff8e6;
            font-size: 20px;
          }
        }

        .wc-right {
          .content {
            margin-left: 10px;
          }
        }
      }
    }
  }

  .mc-center {
    padding-left: 20px;
  }
}

.chose {
  background-color: #1ff8e6;
}

.movedemo {
  button {
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin: 10px;
    border-radius: 7px;
    border: 1px solid rgba(76, 222, 213, 0.5);
    -webkit-box-shadow: unset;
    box-shadow: unset;
    cursor: pointer;
    color: #fff;
    background: no-repeat;
    box-shadow: inset 0px 0px 10px 10px rgba(76, 222, 213, 70%);
    padding: 0px 10px;
  }
}
</style>